<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 19:21:39
-->
<template>
  <div ref="bottom2_container" style="height: 95%"></div>
</template>

<script>
import { Bar } from "@antv/g2plot";

export default {
  data() {
    return {
      dataArr: [
        { name: "一号设备", value: 38 },
        { name: "二号设备", value: 52 },
        { name: "三号设备", value: 61 },
      ],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      const bar = new Bar(this.$refs.bottom2_container, {
        data: this.dataArr,
        height:200,
        width:200,
        autoFit: true,
        xField: "value",
        yField: "name",
        seriesField: "name",
        legend: {
          position: "top-left",
        },
      });

      bar.render();
    },
  },
};
</script>